<template>
  <a-card>
    <div class="main">
      <div class="content symbol">
        <ul class="icon_lists dib-box">
          <li class="dib" v-for="icon in iconJson" :key="icon.icon_id">
            <icon-font :type="'icon-'+icon.font_class"></icon-font>
            <div class="name">{{icon.name}}</div>
            <div class="code-name">#icon-{{icon.font_class}}</div>
          </li>
        </ul>
      </div>
    </div>
  </a-card>
</template>
<script>
import iconJson from "@/components/IconSelect/iconJson";
export default {
  data() {
    return {
      iconJson
    };
  }
};
</script>
<style scoped>
/* 页面布局 */
/* .main {
  padding: 30px 100px;
  width: 960px;
  margin: 0 auto;
} */

.icon_lists {
  width: 100% !important;

  overflow: hidden;
  *zoom: 1;
}

.icon_lists li {
  float: left;
  width: 100px;
  margin-bottom: 10px;
  margin-right: 20px;
  text-align: center;
  list-style: none !important;
  cursor: default;
}

.icon_lists li .code-name {
  line-height: 1.2;
  white-space: nowrap;
}

.icon_lists .anticon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .anticon:hover {
  font-size: 100px;
}

.icon_lists .svg-icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
}

.icon_lists li .name,
.icon_lists li .code-name {
  color: #666;
}
</style>